<template>
  <div>
    <CloudPagination
      show-size-changer
      :total="500"
      :show-total="(total) => `共 ${total} 条`"
      :current="current"
      :page-size.sync="pageSize"
      @change="changePage"
      @showSizeChange="onShowSizeChange"
    ></CloudPagination>
  </div>
</template>

<script>
export default {
  title: '1.基本使用',
  data() {
    return {
      current: 1,
      pageSize: 20
    }
  },
  methods: {
    changePage(page, pageSize) {
      this.current = page;
    },
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
      this.pageSize = pageSize;
    },
  }
}
</script>

<style lang="scss">
</style>